<div class="grid">
    <div class="col-12">
        <div class="card">
            <div class="card-w-title">
                <h5 style="font-weight: 900">用水统计</h5>
            </div>
            <p-toolbar>
                <div
                    class="p-toolbar-group-left flex flex-wrap formgroup-inline"
                >
                    <div style="font-size: 20px">时间类型</div>
                    <div class="field" style="margin-left: 2em">
                        <label for="searchApplicantName" class="p-sr-only"
                            >请选择查询方式</label
                        >
                        <p-dropdown
                            [options]="timeType"
                            [(ngModel)]="selectTimeType"
                            optionLabel="label"
                            optionValue="value"
                            placeholder="选择查询方式"
                        ></p-dropdown>
                    </div>
                    <div style="font-size: 20px">查询日期</div>
                    <div
                        class="field"
                        *ngIf="selectTimeType === '年'"
                        style="margin-left: 2em"
                    >
                        <label for="searchApplicantName" class="p-sr-only"
                            >请输入查询年份</label
                        >
                        <!--input
                            id="searchApplicantName"
                            type="text"
                            pInputText
                            placeholder="请输入查询年份"
                            pTooltip="请输入查询年份"
                        /-->
                        <p-calendar
                            [(ngModel)]="selectYear"
                            view="year"
                            dateFormat="yy"
                            placeholder="选择查询年份"
                            (ngModelChange)="yearChange()"
                        ></p-calendar>
                    </div>
                    <div
                        class="field"
                        *ngIf="selectTimeType === '月'"
                        style="margin-left: 2em"
                    >
                        <label for="searchApplicantName" class="p-sr-only"
                            >请输入查询月份</label
                        >
                        <p-calendar
                            [(ngModel)]="selectMonth"
                            view="month"
                            dateFormat="mm/yy"
                            placeholder="选择查询月份"
                            (ngModelChange)="monthChange()"
                        ></p-calendar>
                    </div>
                </div>

                <div class="p-toolbar-group-right formgroup-inline">
                    <div class="field">
                        <p-button
                            label="查询"
                            icon="pi pi-search"
                            (click)="statisticSearch()"
                        ></p-button>
                        <!--button pButton pRipple type="button" label="查询" icon="pi pi-check"></button-->
                    </div>
                    <div class="field">
                        <button
                            pButton
                            pRipple
                            type="button"
                            label="重置"
                            class="p-button-secondary"
                        ></button>
                    </div>
                </div>
            </p-toolbar>
        </div>
        <div class="card">
            <div class="statisticType">
                用水量合计： <span>{{ totalVolume }}</span> （万m³）
            </div>
            <div *ngIf="!statistics || statistics.length === 0">
                查询数据为空
            </div>
            <div
                class="scroll"
                style="height: auto; background-color: rgb(252, 249, 249)"
            >
                <div class="cityItems" *ngFor="let item of statistics">
                    <div class="water">{{ item.volume }}</div>
                    <div class="name">{{ item.name }}</div>
                </div>
            </div>
            <div>
                <p-chart
                    type="bar"
                    [data]="chartData"
                    [options]="chartOptions"
                    [height]="95"
                ></p-chart>
            </div>
        </div>
    </div>
</div>
